import React, { useContext } from "react";
import styles from './index.module.less';
import { Context } from './../../store/Context';

const ToolBar = () => {
    const { canvas, currentToolBarTab, setState, currentImage } = useContext(Context);

    const handlerExportJson = () => {
        // 1. 序列化画布（默认即可）
        if (canvas) {
            const json = JSON.stringify(canvas.toJSON()); // 第二个参数可选：要额外保留的自定义属性
            // 2. 生成 Blob
            const blob = new Blob([json], { type: 'application/json' });
            // 3. 触发下载
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = 'canvas.json';
            link.click();
        }
    }

    const handlerSelectImage = (tab: string) => {
        setState({ currentToolBarTab: tab });

        if (tab === 'imageEdit') {
            if (currentImage) {
                currentImage.set({
                    selectable: true,
                    evented: true
                });
                canvas?.setActiveObject(currentImage);
                canvas?.renderAll();
            }
        } else {
          currentImage?.set({
            selectable: false,
            evented: false
          });
          canvas?.discardActiveObject();
          canvas?.renderAll();
          
        }
    }

    return (
        <div className={styles.tool_bar}>
            <div className={`${styles.item} ${currentToolBarTab === 'overview' ? styles.active : ''}`} onClick={() => handlerSelectImage( 'overview')}>
                总揽
            </div>
            <div className={`${styles.item} ${currentToolBarTab === 'imageEdit' ? styles.active : ''}`} onClick={() => handlerSelectImage('imageEdit')}>
                图片编辑
            </div>
            <div className={`${styles.item} ${currentToolBarTab === 'elementLibrary' ? styles.active : ''}`} onClick={() => handlerSelectImage('elementLibrary')}>
                元素库
            </div>
            <div className={`${styles.item} ${currentToolBarTab === 'borderLibrary' ? styles.active : ''}`} onClick={() => handlerSelectImage('borderLibrary')}>
                边框库
            </div>
            <div className={`${styles.item} ${currentToolBarTab === 'colorWindow' ? styles.active : ''}`} onClick={() => handlerSelectImage('colorWindow')}>
                彩窗
            </div>
            <div className={`${styles.item} ${currentToolBarTab === 'backgroundLibrary' ? styles.active : ''}`} onClick={() => handlerSelectImage('backgroundLibrary')}>
                背景库
            </div>
            <div className={`${styles.item} ${currentToolBarTab === 'scorching' ? styles.active : ''}`} onClick={() => handlerSelectImage('scorching')}>
                烫色
            </div>
            <div className={`${styles.item} ${currentToolBarTab === 'cuttingLine' ? styles.active : ''}`} onClick={() => handlerSelectImage('cuttingLine')}>
                轮廓刀线
            </div>
            <div className={`${styles.item} ${currentToolBarTab === 'holeDesign' ? styles.active : ''}`} onClick={() => handlerSelectImage('holeDesign')}>
                挂孔设计
            </div>
            <div className={`${styles.item} ${currentToolBarTab === 'socketDesign' ? styles.active : ''}`} onClick={() => handlerSelectImage('socketDesign')}>
                插口设计
            </div>
            <div className={`${styles.item} ${currentToolBarTab === 'whiteInkLayer' ? styles.active : ''}`} onClick={() => handlerSelectImage('whiteInkLayer')}>
                白墨层
            </div>
        </div>
    )
}

export default ToolBar;